import {Component, OnInit, ElementRef} from '@angular/core';
import {HighlightJsService} from 'angular2-highlight-js';
import {ArrayUtils, HighlightUtils} from 'great-jsutils';

@Component({
  selector: 'app-array-test',
  templateUrl: './array-test.component.html',
  styleUrls: ['./array-test.component.less']
})
export class ArrayTestComponent implements OnInit {

  json1 = [{
    'name': '山东省',
    'id': 'id01'
  }];
  json2 = {
    'name': '济南市',
    'id': 'id01-01',
    'parentId': 'id01'
  };
  json1Str = null;
  json1HtmlStr = null;
  constructor(private el: ElementRef, private highlightJsService: HighlightJsService) { }

  ngOnInit() {
    this.json1Str = JSON.stringify(this.json2, undefined, 2);
    this.json1HtmlStr = `<pre>${HighlightUtils.syntaxHighlight(this.json1)}</pre>`;
  }

  hljsDemo() {
    this.highlightJsService.highlight(this.el.nativeElement.querySelector('.json'));
  }

  add() {
    ArrayUtils.add(this.json1, JSON.parse(this.json1Str));
    this.ngOnInit();
  }

  remove() {
    ArrayUtils.remove(this.json1, JSON.parse(this.json1Str));
    this.ngOnInit();
  }

  update() {
    ArrayUtils.update(this.json1, JSON.parse(this.json1Str));
    this.ngOnInit();
  }

}
